
<template>
  <div class="bottomList">
      <ul >
        <li><router-link  to='./sindex'><img v-if="index" src="@/assets/images/scientific/icon-home-pick.png" alt=""><img v-else src="@/assets/images/scientific/icon-home.png" alt="">
        <span>首页</span></router-link>
        </li>
        <li><router-link  to='./sMine'><img v-if="index" src="@/assets/images/scientific/icon-my.png" alt=""><img v-else src="@/assets/images/scientific/icon-my-pick.png" alt="">
        <span>我的</span></router-link>
        </li>
      </ul>
  </div>
</template>

<script>
export default {
  name: 'bottomList',
  data () {
    return {
      index:true,//标识是否在首页
    }
  },
  mounted(){
      this.$route.name=='sindex'?this.index=true:this.index=false
  },
  methods:{
    
  },
  computed:{

  },
  watch:{
      $route (to, from) {
     
      },

  },

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.bottomList{

}
.bottomList ul{
  position: fixed;
  display: flex;
  justify-content: space-around;
  width: 100%;
  background: #fff;
  bottom: 0;
  padding: 5px 0;
}
.bottomList li{
  width: 50%;
  text-align: center;  
}
.bottomList li a{
  display: block;
  
}
.bottomList li a span{
  display: block;
  font-size: 10px;
}
.bottomList li img{
  width: 27px;
  display: block;
  text-align: center;
  margin: 0 auto;
}
</style>
